<template>
  <div class="app-container">
    <div v-loading="loading" shadow="never">
      <div class="toolbar-wrapper">
        <div>
          <el-button v-hasPermi="['sysAppType:post:add']" type="primary" plain :icon="Plus" @click="handleAdd">
            新增顶级分类
          </el-button>
        </div>
      </div>
      <div class="table-wrapper">
        <el-table :data="tableData" row-key="appTypeId" default-expand-all max-height="64vh">
          <el-table-column prop="name" label="分类名称" align="left">
            <template #default="scope">
              <el-icon v-if="scope.row.type == 1"><Folder /></el-icon>
              <el-icon v-if="scope.row.type == 2" :class="[{'binded': scope.row.appManagerId}]"><Menu /></el-icon>
              <span @click="nameClick(scope.row)" :class="['name', scope.row.type == 2 ? 'app' : 'menu', {'binded': scope.row.appManagerId}]">
                {{ scope.row.name }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="分类类型" align="center">
            <template #default="scope">
              <span v-if="scope.row.type == 1">目录</span>
              <span v-if="scope.row.type == 2">应用</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="分类状态" align="center">
            <template #default="scope">
              <span v-if="scope.row.status == 0">显示</span>
              <span v-if="scope.row.status == 1">隐藏</span>
            </template>
          </el-table-column>
          <el-table-column prop="sort" label="显示顺序" align="center" />
          <el-table-column fixed="right" label="操作" width="200" align="center">
            <template #default="scope">
              <div class="flex items-center">
                <el-button
                  v-hasPermi="['sysAppType:post:add']"
                  type="primary"
                  text
                  bg
                  size="small"
                  @click="handleAdd(scope.row)"
                >
                  新增
                </el-button>
                <el-button
                  v-hasPermi="['sysAppType:put:update']"
                  type="primary"
                  text
                  bg
                  size="small"
                  @click="handleUpdate(scope.row)"
                >
                  修改
                </el-button>
                <el-dropdown
                  class="operation-more"
                >
                  <span class="el-dropdown-link">
                    更多
                    <el-icon class="el-icon--right">
                      <arrow-down />
                    </el-icon>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>

                      <div v-if="scope.row.type == 2">
                        <el-dropdown-item @click="bindAppManager(scope.row)">
                          <div v-hasPermi="['sysAppType:put:bindAppManager']" class="dropdown-item">绑定应用</div>
                        </el-dropdown-item>
                        <el-dropdown-item @click="cancleAppManager(scope.row)">
                          <div v-hasPermi="['sysAppType:put:cancleAppManager']" class="dropdown-item">取消绑定</div>
                        </el-dropdown-item>
                      </div>

                      <el-dropdown-item @click="handleDelete(scope.row)">
                        <div v-hasPermi="['sysAppType:delete:delete']" class="dropdown-item">删除应用</div>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <AddClassify
      ref="addClassify"
      v-model:visible="pageData.isShowAddDialog"
      :id="pageData.editingId"
      :parentId="pageData.parentId"
      @addSuccess="addSuccess"
    />
    <BindApp v-model:visible="pageData.isShowBindDialog" :id="pageData.editingId" @addSuccess="addSuccess" />
    <AddApp v-model:visible="pageData.isShowAppDialog" :id="pageData.editingId" title="查看应用" />
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Refresh, Plus, Delete, ArrowDown, Folder, Menu } from '@element-plus/icons-vue'
import { usePagination } from '@/hooks/usePagination'
import AddClassify from './components/addClassify.vue'
import BindApp from './components/bindApp.vue'
import AddApp from '../appManager/components/addApp.vue'
import { appTypeTree, appTypeDel, cancleAppManagerApi } from '@/api/system/app'
const loading = ref(false)
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
const addClassify = ref(null)
const pageData = reactive({
  isShowAddDialog: false,
  isShowBindDialog: false,
  isShowAppDialog: false,
  editingId: '',
  parentId: ''
})

const addSuccess = (record) => {
  pageData.isShowAddDialog = false
  pageData.isShowBindDialog = false
  getTableData()
}
const cancleAppManager = (row) => {
  ElMessageBox.confirm(`正在取消绑定应用，确认取消绑定？`, 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    cancleAppManagerApi({ appTypeId: row.appTypeId }).then(() => {
      ElMessage.success('取消绑定成功')
      getTableData()
    })
  })
}
const handleDelete = (row) => {
  if (row.children && row.children.length > 0) {
    ElMessage.error('存在子分类，不可删除')
    return
  }
  ElMessageBox.confirm(`正在删除应用：${row.name}，确认删除？`, 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    appTypeDel(row.appTypeId).then(() => {
      ElMessage.success('删除成功')
      getTableData()
    })
  })
}
const bindAppManager = (row) => {
  pageData.editingId = row.appTypeId
  pageData.isShowBindDialog = true
}
const resetSecret = (row) => {
  ElMessageBox.confirm(`正在重置密钥，确认重置`, 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // deleteParameter(row.id).then(() => {
    //   ElMessage.success('删除成功')
    //   getTableData()
    // })
  })
}

const handleUpdate = (row) => {
  pageData.editingId = row.appTypeId
  pageData.isShowAddDialog = true
}

const tableData = ref([])
const searchFormRef = ref()
const searchData = reactive({
  name: '',
  paramKey: ''
})
const getTableData = () => {
  loading.value = true
  appTypeTree()
    .then((res) => {
      tableData.value = res.data
    })
    .catch(() => {
      tableData.value = []
    })
    .finally(() => {
      loading.value = false
    })
}
const handleSearch = () => {
  if (paginationData.currentPage === 1) {
    getTableData()
  }
  paginationData.currentPage = 1
}
const handleAdd = (row) => {
  pageData.editingId = ''
  pageData.parentId = row.appTypeId || 0
  pageData.isShowAddDialog = true
}
const resetSearch = () => {
  searchFormRef.value?.resetFields()
  if (paginationData.currentPage === 1) {
    getTableData()
  }
  paginationData.currentPage = 1
}
const nameClick = (row) => {
  if (row.type == 1) {
    return
  }
  if (!row.appManagerId || row.appManagerId == 0) {
    ElMessage.warning('未绑定应用')
    return
  }
  pageData.editingId = row.appManagerId
  pageData.isShowAppDialog = true
}
watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, { immediate: true })
</script>

<style lang="scss" scoped>
.search-wrapper {
  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;

  :deep(.el-button) {
    padding: 6px 12px;
  }
}

.table-wrapper {
  margin-bottom: 20px;
}

.operation-more {
  margin-left: 12px;
  font-size: 12px;

  .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
  }
}
:deep(.el-dropdown-menu__item) {
  padding: 0;
}
.dropdown-item {
  padding: 5px 16px;
}
.name {
  cursor: pointer;
  padding-left: 10px;
}
.app {
  // color: #81d3f8;
}
.binded {
  color: cornflowerblue;
}
</style>
